<!-- 检查监控列表 -->
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { getCheckRecord } from '../../../api/index'
import BaseHeader from '../BaseHeader.vue';
import { useRouter } from 'vue-router';
import CheckOk from './checkok.vue'
import { addCheckLog } from '../../../api/index';
import { ElMessage } from 'element-plus';
import emitter from '../../../mitt';
import * as XLSX from 'xlsx'; 

onMounted(() => {
  onSubmit();
})
const show = ref(false)
// const showCheck = () => {
//   show.value = true
// }

// const close = () => {
//   show.value = false
// }
const total = ref(0);
const router = useRouter();
const currentType = ref('50')

const formItem = reactive({
  name: '',
  type: '50',
})

// 当前筛选table数据
const tableData = reactive<any[]>([]);

// 当前页码
let current = ref(1);

// 当前每页条数
let size = ref(10);

// 检查完毕
const formItemInspection = reactive({
  inspectUser: 'admin',
  type: '50',
  remark: '监控'
})
let onCheck = () => {
  // show.value = true;
  addCheckLog(formItemInspection).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success(res.msg);
      onSubmit();
      emitter.emit('checkOk', true);
    } else {
      ElMessage.error(res.msg);
    }

  })
}

const onSubmit = () => {
  const params = {
    ...formItem,
    current: current.value,
    size: size.value
  };
  getCheckRecord(params).then((res: any) => {
    let data = res?.data?.records as any[];
    total.value = res?.data?.total as number;
    tableData.splice(0, tableData.length, ...data);
  })
}

const handleSizeChange = (val: number) => {
  size.value = val;
  onSubmit();
}

const handleCurrentChange = (val: number) => {
  current.value = val;
  onSubmit();
}

const backHome = () => {
  router.push('/check');
}

const backHomePage = () => {
  router.push('/');
}

const onVideo = () => {
  window.open('192.168.1.6/doc/page/login.asp?_1726650370421', '_blank');
}

const exportToExcel = ()=> {  
      const data = tableData.map(item => ({  
        '检查人': item.createBy,  
        '检查内容': item.remark,     
        '检查时间': item.createTime,     
       
      }));  
      const ws = XLSX.utils.json_to_sheet(data);  
      const wb = XLSX.utils.book_new();  
      XLSX.utils.book_append_sheet(wb, ws, '监控记录检查');  
      XLSX.writeFile(wb, '监控记录检查.xlsx');  
    } 
</script>

<template>
  <BaseHeader title="检查监控列表" />
  <div class="main-box">
    <el-form :inline="true" :model="formItem" class="demo-form-inline">
      <el-form-item label="资料名称">
        <el-input v-model="formItem.name" placeholder="输入资料名称" clearable style="width: 20vw;" />
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" circle @click="onSubmit" />
        <el-button type="primary" @click="onCheck">检查完毕</el-button>
        <el-button type="primary" @click="onVideo">查看回放</el-button>
        <el-button type="success" @click="exportToExcel">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%;height: 70vh; " class="my-custom-table">
      <el-table-column prop="createBy" label="检查人" />
      <el-table-column prop="remark" label="检查内容" />
      <el-table-column prop="createTime" label="检查时间" />

    </el-table>

    <div class="paginations">
      <el-pagination v-model:current-page="current" :page-size="size" :size="size" layout="total, prev, pager, next"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" background class="page" />
      <el-button @click="backHome">返回</el-button>
      <el-button @click="backHomePage" type="primary">返回首页</el-button>
    </div>
    <CheckOk :centerDialogVisible="show" :type="currentType" @confirm="show = false" @close="show = false" />

  </div>
</template>

<style scoped lang="less">
.main-box {
  box-sizing: border-box;
  padding: 5vh;

  /deep/ .el-form-item__label {
    color: rgb(119, 240, 244);
  }
}

.paginations {
  position: fixed;
  bottom: 5vh;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .page {
    margin-right: 10px;
  }
}
</style>
